<template>
	<view class="distribution">
		<view class="imageBackground">
			<view class="recordsList">

				<view class="flex-between">
					<view class="flex-start-center" >
						<image class="avatar" :src="userInfo.avatar" mode=""></image>
					
						<view class="flex-columns" style="margin-left: 20rpx;height: 90rpx;">
							<text style=" font-size: 32rpx;font-weight: 400;">{{userInfo.nickname}}</text>
							<!-- <text style="color: rgb(255, 255, 255);">上级: XXXX</text> -->
						</view>
					</view>
					<view  v-if="getConfig.withdrawal_switch==1" class="withdrawalBtn flex" @click="withdrawal()">
						提现
					</view>
				</view>
				<!-- 团队 -->
				<view class="team " >
					<view class="top">
						<view class="flex-column">
							<text style="color: rgb(153, 153, 153);font-size: 32rpx;margin-bottom: 10rpx;">我的团队</text>
							<text class="font-weight_bold font-size_28rpx">{{myTeam.team_count}}</text>
						</view>
						<view class="flex-column">
							<text
								style="color: rgb(153, 153, 153);font-size: 32rpx;margin-bottom: 10rpx;">今日新增(人)</text>
							<text class="font-weight_bold font-size_28rpx">{{myTeam.team_today_count}}</text>
						</view>
					</view>
					<view class="detailedStatistics">
						<view class="flex-between">
							<view style="color: rgb(153, 153, 153);">
								共计获得(佣金)
							</view>
							<view style="color: rgb(153, 153, 153);" @click="viewDetail()">
								查看明细

								<uni-icons type="right" color="rgb(153, 153, 153)" size="15"></uni-icons>
							</view>
						</view>
						<view class="font-weight_bold" style="margin: 28rpx 0;color: rgb(255, 2, 2);font-size: 38rpx;">
							{{userInfo.total_income}}
						</view>
						<!-- 数据明细 -->
						<view class="flex-between dataDetails">
							<view class="flex-column" v-for="(item,i) in dataDetails" :key="i">
								<view class="margin-bottom_10rpx" style="color:rgb(102, 102, 102);font-size: 28rpx;">
									{{item.text}}
								</view>
								<view class="font-weight_bold" style="color: rgb(51, 51, 51);font-size: 28rpx;">
									{{totelName(item.number)}}
								</view>

							</view>

						</view>
					</view>
				</view>


			</view>
		</view>
		<view class="tabCard" >
			<view v-for="(item,i) in list" :key="i">
				<block v-if="(!(getConfig.withdrawal_switch==2&&item.text=='提现记录'))&&(!(getConfig.distribution_level==0&&item.text=='我的团队'))">
					
					<view @click="scanFn(item)" class=" comprehensiveScoreList flex-between">
						<view class="flex">
							<image class="avater" :src="item.img" mode=""></image>
							<view class="rightContent">
								<view class="authorizationTitle">
									{{item.text}}
					
								</view>

							</view>
						</view>
					
						<uni-icons type="right" color="rgb(153, 153, 153)" size="15"></uni-icons>
					
					</view>
				</block>
				

			</view>
		</view>
		<sunui-popup ref="myPackagePopup">
			<template v-slot:content>

				<view class="backgroundImg"  :style="{ '--bg-image': `url(${getConfig.invite_img})` }">
				
					<image class="qrcode" :src="userInfo.invite_url" mode=""></image>
				</view>

			</template>
		</sunui-popup>


	</view>
</template>

<script>

	export default {
		components: {
			
		},
		data() {
			return {
				user:this.$img.user,
				explain:this.$img.explain,
				tabIndex: 4,
				userInfos: uni.getStorageSync("userInfo"),
				myTeam:null,
				userInfo:null,
				getConfig:null,
				// 数据明细
				dataDetails: [{
						number: 3.00,
						text: '今年获得(收益)'
					},
					{
						number: 3.00,
						text: '本月获得(收益)'
					},
					{
						number: 18000,
						text: '今日获得(收益)'
					},

				],

				list: [{
						img: this.$img.user,
						text: '我的团队',

						url: '/pagesA/personalCenter/myFans',


					},
					{
						img: this.$img.wallet,

						text: '提现记录',

						url: '/pagesA/personalCenter/distributionRecords',


					},
					// {
					// 	img: '../../static/会员卡yi/组合 498.png',
					// 	text: '分销明细',

					// 	url: '/pages/distribution/distributionDetails/distributionDetails',

					// },
					{
						img: this.$img.explain,
						text: '推广说明',

						url: '/pagesA/personalCenter/distributionInstructions',

					},
					{
						img: this.$img.poster,
						text: '推广海报',
                        poster:true

					},
					

				],
			}
		},
		onLoad() {
         
		  
		},
		mounted() {
			this.userInfoFn()
			this.init()
		},
		methods: {
			async userInfoFn(){
				const result = await this.$http.post({
					url: this.$api.userInfo,
					data: {
						
				
				
				
					},
					headers: {
						'Authorization': this.userInfos.token
					}
				
				})
				
				if (result.code == 0) {
					console.log('data', result.data);
					this.userInfo=result.data
					
					
				}else{ 
					this.$sun.toast(result.message, 'none') 
				}
			},
			async init(){
				
				const resConfig = await this.$http.post({
					url: this.$api.config,
					data: {
						
					},
					headers: {
						
					}
							
				})
							
				if (resConfig.code == 0) {
				
							
							
							
					this.$sun.toast(resConfig.message, 'none')
					this.getConfig = resConfig.data
					
				
					console.log(this.getConfig,'this.getConfig')
							
				} else {
							
					this.$sun.toast(resConfig.message, 'none')
				}
				
				const res = await this.$http.post({
					url: this.$api.income,
					data: {
				
						
					},
					headers: {
						'Authorization': this.userInfos.token
					}
				
				})
				console.log(res)
				if (res.code == 0) {
					// 跳转到登录页面
			          this.myTeam=res.data
					  this.dataDetails.forEach((item) => {
					  	switch (item.text) {
					  		case '今年获得(收益)':
					  			item.number = res.data.year_amount;
					  			break;
					  		case '本月获得(收益)':
					  			item.number = res.data.month_amount;
					  			break;
					  		case '今日获得(收益)':
					  			item.number = res.data.today_amount;
					  			break;
					  		
					  	}
					  })
					  
					  console.log(res.data)
					// this.$sun.toast(res.message, 'none')
				} else {
					
					this.$sun.toast(res.message, 'none')
				}
			},
			
			withdrawal(){
				this.$sun.navGo('/pagesA/personalCenter/applyWithdrawal')
			},
			// 查看明细
			viewDetail(){
				this.$sun.navGo('/pagesA/personalCenter/distributionRecords')
			},
			scanFn(item) {
				console.log(item)
				if(item.poster){
					this.$refs.myPackagePopup.show({
						style: 'padding:50rpx;',
						bottomClose: true,
						shadeClose: true,
						topclose: true
					});
				}else{
					this.$sun.navGo(item.url)
				}
				
				
				
			},
			
		},
		computed: {
			totelName: function() {
				return function(num) {

					if (num >= 10000) {
						let remainder = num % 10000;
						let quotient = Math.floor(num / 10000);
						let decimal = Math.floor(remainder / 1000);
						return quotient + '.' + decimal + '万';
					} else {
						return num.toString();
					}
				};
			}
		},
	}
</script>

<style lang="less" scoped>
	page {
		background: #f6f6f6;
	}
   .backgroundImg{
   	   
   	   width: 696rpx;
   	   height: 860rpx;
   	   background-repeat: no-repeat;
   	   background-size: contain;
   	   background-image: (var(--bg-image));
   	   position: relative;
   	   .qrcode{
   		   width: 245rpx;
   		   height: 245rpx;
   		   position: absolute;
   		   bottom: 100rpx;
   		   left: 225rpx;
   	   }
   }
	.distribution {
		.imageBackground {
			height: 745rpx;
			background-repeat: no-repeat;
			background-size: contain;
			background-image: url('http://yunhunjian123.oss-cn-shanghai.aliyuncs.com/2024-06-17/72d4b202406171956345373.png ');
			padding: 30rpx;
// http://yunhunjian123.oss-cn-shanghai.aliyuncs.com/2024-06-17/c2a31202406171956142126.png
			.recordsList {
				padding-bottom: 30rpx;
				margin-top: 30rpx;


				.avatar {
					width: 130rpx;
					height: 130rpx;
					border-radius: 50%;
				}

				.withdrawalBtn {
					width: 120rpx;
					height: 52rpx;
					border-radius: 50rpx;
					color: rgb(172, 130, 73);
					background: rgb(255, 255, 255);
				}

				.team {
					margin-top: 40rpx;
					height: 562rpx;
					background-repeat: no-repeat;
					background-size: contain;
					background-image: url('http://yunhunjian123.oss-cn-shanghai.aliyuncs.com/2024-06-18/1f371202406180922136969.png');

					.top {

						display: flex;
						justify-content: space-around;
						align-items: self-end;
						padding: 56rpx;
					}

					.detailedStatistics {
						padding: 46rpx 38rpx;
					}
				}
			}

		}

		.tabCard {
			background-color: #fff;

			margin: 34rpx 24rpx;

			border-radius: 10rpx;
			padding: 0 24rpx;

			.comprehensiveScoreList {
				height: 120rpx;
				border-bottom: 2rpx solid #F5F6FB;


				.avater {
					width: 56rpx;
					height: 56rpx;
					margin-right: 18rpx;

				}

				.rightContent {
					.authorizationTitle {
						color: #000;
						font-size: 28rpx;
						font-weight: 600;

					}

					.authorizationText {
						color: #666;
						font-family: Inter;
						font-size: 24rpx;
					}

				}

				.btnFinish {
					// 		width: 140rpx;
					// 		height: 64rpx;
					// 		border-radius: 76rpx;
					// 		border: 2rpx solid #D9D9D9;

					// 		background: #FFF;
					.arrowImg {
						width: 46rpx;
						height: 46rpx;
					}

					.codyImg {
						margin-left: 10rpx;
						width: 28rpx;
						height: 28rpx;
					}

				}



			}

		}
	}
</style>